<template>
	<view>
		<u-navbar back-text="首页" backIconName=" " :backTextStyle="{color:'#ffffff'}" :customBack="back"
			:background="background" titleColor="#fff">
			<!-- <view class="search-wrap" @click="toSearch">
				<u-search height="56" inputAlign="center" placeholder="请输入关键词搜索" :searchIconStyle="searchIconStyle"
					:showAction="false"></u-search>
			</view> -->
		</u-navbar>
		<view class="home u-p-b-0">
			<u-swiper :list="swiperList"></u-swiper>
			<view class="u-m-t-20">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(category, index) in categories" :key="index"
						@click="$common.navigateTo(`/pages/index/list?cate_id=${category.cate_id}`)">
						<u-image :src="category.cover_img" borderRadius="50%" width="108" height="108"></u-image>
						<view class="grid-text">{{ category.cate_name }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="box u-p-t-30">
			<view class="box-side">
				<view class="u-flex u-row-between">
					<view class="title-blod">热门推荐</view>
					<view class="title-more">更多<u-icon name="arrow-right" color="#18B566" size="24"></u-icon>
					</view>
				</view>
				<view class="">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(item, index) in hotItems" :key="index"
							@click="() => navigateToDetail(item.id)">
							<u-image width="220" height="220" :src="item.cover_img" borderRadius="12"></u-image>
							<view class="item-name">{{ item.good_name }}</view>
							<view class="item-remark">{{ item.good_remark }}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-side">
				<view class="u-flex u-row-between">
					<view class="title-blod">新品优选</view>
					<view class="title-more">更多<u-icon name="arrow-right" color="#18B566" size="24"></u-icon>
					</view>
				</view>
				<view class="">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(item, index) in newItems" :key="index"
							@click="() => navigateToDetail(item.id)">
							<u-image width="220" height="220" :src="item.cover_img" borderRadius="12"></u-image>
							<view class="item-name">{{ item.good_name }}</view>
							<view class="item-remark">{{ item.good_remark }}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="demo-water">
		  <view class="waterfall-item" v-for="(item, index) in allItems" :key="index"
		    @click="() => navigateToDetail(item.id)">
		    <u-image width="250rpx" height="220rpx" :src="item.cover_img" borderRadius="12"></u-image>
		    <view class="item-name">{{ item.good_name }}</view>
		    <view class="item-remark">{{ item.good_remark }}</view>
		    <view class="item-cook" v-html="truncateText(item.cook, 50)"></view>
		    <view class="item-description" v-html="truncateText(item.description, 50)"></view>
		    <view class="item-process" v-html="truncateText(item.process, 50)"></view>
		  </view>
		</view>
		<u-back-top :scrollTop="scrollTop" mode="circle" bottom="200" right="40" top="600" :icon="icon"
			:icon-style="iconStyle" :tips="tips" :custom-style="customStyle">
		</u-back-top>
	</view>
</template>

<script>
	import water from '@/components/water';

	export default {
		components: {
			water
		},
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				searchIconStyle: {
					'display': 'none'
				},
				swiperList: [{
						image: '/static/banner1.jpg'
					},
					{
						image: '/static/banner2.jpg'
					},
					{
						image: '/static/banner3.jpg'
					},
				],
				flowList: [],
				page: 1,
				is_loading: true,
				scrollTop: 0,
				icon: 'arrow-up',
				iconStyle: {
					color: '#ffffff',
					fontSize: '30rpx'
				},
				tips: '顶部',
				customStyle: {
					backgroundColor: '#6BC362',
					color: '#ffffff'
				},
				list: [{
						image: '/static/pic.jpg'
					},
					{
						image: '/static/pic2.jpg'
					},
					{
						image: '/static/pic3.jpg'
					},
					{
						image: '/static/pic4.jpg'
					},
				],
				hotimg: '/static/pic2.jpg',
				newimg: '/static/pic4.jpg',
				categoryimg: '/static/pic3.jpg',
				hotItems: [],
				newItems: [],
				allItems: [],
				categories: []
			}
		},
		onLoad() {
			console.log(333)
			this.fetchCategories();
			this.fetchHotItems();
			this.fetchNewItems();
			this.fetchAllItems();
		},
		methods: {
			toSearch() {
				this.$common.navigateTo('/pages/index/search')
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					let item = JSON.parse(JSON.stringify(this.list[index]));
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			onReachBottom() {
				if (this.is_loading) {
					this.page++;
					this.addRandomData();
				}
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			back() { // 首页
				uni.navigateBack({
					delta: 2
				})
			},
			navigateToDetail(id) {
			  if (id) {
			    uni.navigateTo({
			      url: `/pages/index/detail?good_id=${id}`
			    });
			  } else {
			    console.error('Invalid id:', id);
			  }
			},
			fetchCategories() {
				uni.request({
					url: 'http://localhost:8084/good/getcategorywithgoods',
					method: 'GET',
					success: (res) => {
						if (res.data.status === 1) {
							this.categories = res.data.data.reduce((acc, item) => {
								if (!acc.find(cat => cat.cate_id === item.cate_id)) {
									acc.push({
										cate_id: item.cate_id,
										cate_name: item.cate_name,
										cover_img: item.cover_img ||
											'/static/default-category-img.jpg',
										goods: []
									});
								}
								const category = acc.find(cat => cat.cate_id === item.cate_id);
								if (item.good_id) {
									category.goods.push({
										good_id: item.good_id,
										good_name: item.good_name,
										cover_img: item.cover_img,
										good_remark: item.good_remark
									});
								}
								return acc;
							}, []);
							this.shuffleArray(this.categories);
						} else {
							console.error(res.data.message);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			fetchHotItems() {
				uni.request({
					url: 'http://localhost:8084/flavor/getflavor',
					method: 'GET',
					success: (res) => {
						if (res.data.status === 1) {
							this.hotItems = res.data.data.slice(0, 3);
						} else {
							console.error(res.data.message);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			fetchNewItems() {
				uni.request({
					url: 'http://localhost:8084/flavor/getflavor',
					method: 'GET',
					success: (res) => {
						if (res.data.status === 1) {
							this.newItems = res.data.data.slice(3, 6);
						} else {
							console.error(res.data.message);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			fetchAllItems() {
				uni.request({
					url: 'http://localhost:8084/flavor/getflavor',
					method: 'GET',
					success: (res) => {
						if (res.data.status === 1) {
							this.allItems = res.data.data.map(item => ({
								...item,
								cook: item.cook || ''
							}));
						} else {
							console.error(res.data.message);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			truncateText(text, length) {
				if (!text) {
					return '';
				}
				if (text.length > length) {
					return text.substring(0, length) + '...';
				}
				return text;
			},
			shuffleArray(array) {
				for (let i = array.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[array[i], array[j]] = [array[j], array[i]];
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.grid-text {
		font-size: 24rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.search-wrap {
		margin: 0 30rpx 0 10rpx;
		flex: 1;
	}

	.box {
		background-color: #f7f7f7;
		padding: 15rpx 10rpx;

		.box-side {
			background-color: #fff;
			padding: 15rpx 10rpx 0 10rpx;
			border-radius: 12rpx;
		}
	}

	.item-name {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #333;
	}

	.item-remark {
		font-size: 24rpx;
		margin-top: 4rpx;
		color: #999;
	}

	.demo-water {
		padding: 20rpx;
		background-color: #f7f7f7;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.waterfall-item {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;

		.item-name {
			font-size: 28rpx;
			margin-top: 10rpx;
			color: #333;
		}

		.item-remark {
			font-size: 24rpx;
			margin-top: 4rpx;
			color: #999;
		}

		.item-cook {
			font-size: 22rpx;
			margin-top: 10rpx;
			color: #666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-description {
			font-size: 22rpx;
			margin-top: 10rpx;
			color: #999;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-process {
			font-size: 22rpx;
			margin-top: 10rpx;
			color: #999;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>